<template>
  <div id="whole">
    <div id="aside">
      <el-table :data="type_list">
        <el-table-column label="类别" prop="name">
          <template #default="scope">
            <el-button
              id="button1"
              type="category"
              @click="category(scope.row.id)"
              >{{ scope.row.name }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>


    <div id="main">
      <el-table :data="goods_list">
        <el-table-column label="商品名字" prop="name"></el-table-column>
        <el-table-column label="商品的价格" prop="price"></el-table-column>
        <el-table-column label="商品类别" prop="type"></el-table-column>
        <el-table-column label="商品图片">
          <template #default="scope">
            <img :src="scope.row.image" width="80" height="80" />
          </template>
        </el-table-column>
        <el-table-column label="添加订单">
            <template #default="scope">
                <el-button type="primary" @click="orders(scope.row.id)">添加订单</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>

    <div id="footer">
        <ul id="ul">
            <el-row>
                <li id="li"><el-button type="index" @click="jump(1)">主页</el-button></li>
                <li id="li"><el-button type="index" @click="jump(2)">订单</el-button></li>
                <li id="li"><el-button type="index" @click="jump(3)">店铺</el-button></li>
                <li id="li"><el-button type="index" @click="jump(4)">用户</el-button></li>
            </el-row>
        </ul>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import qs from "qs";
export default {
  name: "Index",
  data() {
    return {
      goods_list: [],
      type_list: [],
      user_id: this.$route.params.user_id,
    };
  },
  mounted() {
    // 所有的商品
    Axios.get("http://127.0.0.1:8000/shop/good/")
      .then((resp) => {
        console.log("获取到的数据", resp);
        if (resp.data.code == 200) {
          console.log("获取成功", resp);
          this.goods_list = resp.data.data;
        }
      })
      .catch((err) => {
        console.log("获取失败", err);
      });
    // 所有的类别
    Axios.get("http://127.0.0.1:8000/shop/type/")
      .then((resp) => {
        console.log("获取到的数据", resp);
        if (resp.data.code == 200) {
          console.log("获取成功", resp);
          this.type_list = resp.data.data;
        }
      })
      .catch((err) => {
        console.log("获取失败", err);
      });
  },
  methods: {
    //   分类
    category(id) {
      Axios.get("http://127.0.0.1:8000/shop/type_goods/" + id + "/")
        .then((resp) => {
          console.log("获取到的数据", resp);
          if (resp.data.code == 200) {
            console.log("获取成功", resp);
            this.goods_list = resp.data.data;
          }
        })
        .catch((err) => {
          console.log("获取失败", err);
        });
    },

    // 添加订单
    orders(){

    },

    // 页面跳转
    jump(number){
        if(number ==1){
            this.$router.push("/index")
        }
        if(number ==2){
            this.$router.push("/order")
        }
        if(number ==3){
            this.$router.push("/store")
        }
        if(number ==4){
            this.$router.push("/all_Information")
        }
    }
  },
};
</script>

<style>
#whole {
  width: 100%;
  height: 100vh;
}
#aside {
  height: 90vh;
  width: 20%;
  float: left;
  background-color: rgb(194, 212, 229);
}
#main {
  height: 90vh;
  width: 80%;
  float: left;
}
#button1 {
  background-color: rgb(194, 212, 229);
  border: none;
}
#footer{
    background-color: tomato;
    width: 100%;
    height: 10vh;
    float: left;
}
#ul{
    width: 100%;
    height: 10vh;
    background-color: tomato;
}
#li{
    width: 25%;
    height: 10vh;
    float: left;
    background-color: turquoise;
}
.el-button{
    border-radius: 45%;
    border:none
}
</style>